/**
 * 抢票确认
 * @email 626097912@qq.com
 * Created by dength on 2017/04/14
 * 
 * 此页面存在键盘挡住输入框问题
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    TextInput,
    Image
} from 'react-native';
import BaseComponent from '../base/baseComponent';
import Constants from '../base/constants';
import CommonStyles from '../base/commonStyles';
import Icon from 'react-native-vector-icons/Entypo';
import BindAccount from './customWindow/bindAccount';
import SeatCategory from './customWindow/seatCategory';
import AlternativeDate from './customWindow/alternativeDate';
import { getNavigator } from '../route/route';

class GtStart extends BaseComponent {
    constructor(props) {
        super(props);
        this.state = {
            currentState: '添加乘车人',
            showBindAccount: false,
            showSeatCategory: false,
            showAlternativeDate: false,
        }
    }

    getNavigationBarProps() {
        return {
            title: '抢票确认',
            leftButtonImage: require('../images/ic_return.png'),
            hideRightButton: true,
        };
    }

    //跳转方法
    _onPress(navname) {
        getNavigator().push({ name: navname });
    }
    //12306账号登录
    onOpenBindAccount() {
        this.setState({
            showBindAccount: true
        });
    }

    onCloseBindAccount() {
        this.setState({
            showBindAccount: false
        });
    }
    //备选坐席弹窗
    onOpenSeatCategory() {
        this.setState({
            showSeatCategory: true
        });
    }

    onCloseSeatCategory() {
        this.setState({
            showSeatCategory: false
        });
    }

    //备选日期弹窗
    onOpenAlternativeDate() {
        this.setState({
            showAlternativeDate: true
        });
    }

    onCloseAlternativeDate() {
        this.setState({
            showAlternativeDate: false
        });
    }

    renderState() {
        let { currentState, showBindAccount, showSeatCategory, showAlternativeDate} = this.state;
        switch (currentState) {
            case '第一次登陆':
                return (
                    <View style={{ marginTop: 15 }}>
                        <TouchableOpacity
                            onPress={this.onOpenBindAccount.bind(this)}
                            activeOpacity={0.8}
                            style={styles.binding}>
                            <View style={[styles.binding_box, { borderBottomColor: '#C8C7CC', borderBottomWidth: 0.5, }]}>
                                <Text style={{ fontSize: 12, color: '#555555' }}>绑定12306账号</Text>
                                <Image style={{ width: 22, height: 19 }} source={require('../images/ic_advanceBooking_t.png')} />
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity
                            onPress={() => this._onPress('AddUser')}
                            activeOpacity={0.8}
                            style={styles.binding}>
                            <View style={styles.binding_box}>
                                <Text style={{ fontSize: 12, color: '#555555' }}>添加/修改乘车人</Text>
                                <Image style={{ width: 22, height: 20 }} source={require('../images/ic_advanceBooking_b.png')} />
                            </View>
                        </TouchableOpacity>
                        <View style={{ marginTop: 15 }}>
                            <View style={styles.waiceng_box}>
                                <View style={[styles.jiu_box, styles.zceng_box]}>
                                    <View style={{ width: 70 }}>
                                        <Text style={styles.xin_box_color}>短信通知</Text>
                                    </View>
                                    <TextInput
                                        style={{ fontSize: 12, textAlign: 'right', textAlignVertical: 'center', flex: 1, color: '#B2BBC2', height: 47, }}
                                        placeholder="请输入手机号"
                                        placeholderTextColor="#B2BBC2"
                                        underlineColorAndroid="transparent"
                                        numberOfLines={1}
                                        />
                                </View>
                            </View>
                        </View>
                    </View>
                );
            case '绑定12306账号':
                return (
                    <View style={{ marginTop: 15 }}>
                        <TouchableOpacity
                            activeOpacity={0.8}
                            onPress={this.onOpenBindAccount.bind(this)}
                            style={styles.binding}>
                            <View style={[styles.binding_box, { borderBottomColor: '#C8C7CC', borderBottomWidth: 0.5, }]}>
                                <Text style={{ fontSize: 12, color: '#555555' }}>绑定12306账号</Text>
                                <Text style={{ fontSize: 10, color: '#FF900A' }}>切换账号</Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity
                            onPress={() => this._onPress('AddUser')}
                            activeOpacity={0.8}
                            style={styles.binding}>
                            <View style={styles.binding_box}>
                                <Text style={{ fontSize: 12, color: '#555555' }}>添加/修改乘车人</Text>
                                <Image style={{ width: 22, height: 20 }} source={require('../images/ic_advanceBooking_b.png')} />
                            </View>
                        </TouchableOpacity>
                        <View style={{ marginTop: 15 }}>
                            <View style={styles.waiceng_box}>
                                <View style={[styles.jiu_box, styles.zceng_box]}>
                                    <View style={{ width: 70 }}>
                                        <Text style={styles.xin_box_color}>短信通知</Text>
                                    </View>
                                    <TextInput
                                        style={{ fontSize: 12, textAlign: 'right', textAlignVertical: 'center', flex: 1, color: '#B2BBC2', height: 47, }}
                                        placeholder="请输入手机号"
                                        placeholderTextColor="#B2BBC2"
                                        underlineColorAndroid="transparent"
                                        numberOfLines={1}
                                        />
                                </View>
                            </View>
                        </View>
                    </View>
                );
            case '添加乘车人':
                return (
                    <View style={{ marginTop: 15 }}>
                        <TouchableOpacity
                            activeOpacity={0.8}
                            onPress={this.onOpenBindAccount.bind(this)}
                            style={styles.binding}>
                            <View style={[styles.binding_box, { borderBottomColor: '#C8C7CC', borderBottomWidth: 0.5, }]}>
                                <Text style={{ fontSize: 12, color: '#555555' }}>绑定12306账号</Text>
                                <Text style={{ fontSize: 10, color: '#FF900A' }}>切换账号</Text>
                            </View>
                        </TouchableOpacity>
                        <View style={styles.binding}>
                            <View style={[styles.tianjia, { borderBottomColor: '#C8C7CC', borderBottomWidth: 0.5, }]}>
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    style={styles.tianjia_lf}>
                                    <Image style={styles.tianjia_lf_img} source={require('../images/ic_advanceBooking_c.png')} />
                                </TouchableOpacity>
                                <View style={styles.tianjia_ce}>
                                    <View style={[styles.tianjia_ce_li, { alignItems: 'flex-start', }]}>
                                        <Text style={{ fontSize: 12, fontWeight: 'bold' }}>乘客姓名</Text>
                                        <View style={{ position: 'absolute', top: 15, left: 55 }}>
                                            <Text style={{ fontSize: 10 }}>成人票</Text>
                                        </View>
                                    </View>
                                </View>
                                <View style={styles.tianjia_ce}>
                                    <View style={[styles.tianjia_ce_li, { alignItems: 'flex-end' }]}>
                                        <Text style={{ fontSize: 12, }}>43001****6698</Text>
                                    </View>
                                </View>

                            </View>
                        </View>
                        <TouchableOpacity
                            activeOpacity={0.8}
                            onPress={() => this._onPress('AddUser')}
                            style={styles.binding}>
                            <View style={styles.binding_box}>
                                <Text style={{ fontSize: 12, color: '#FF900A' }}>添加/修改乘车人</Text>
                                <Image style={{ width: 22, height: 20 }} source={require('../images/ic_advanceBooking_b.png')} />
                            </View>
                        </TouchableOpacity>
                        <View style={{ marginTop: 15 }}>
                            <View style={styles.waiceng_box}>
                                <View style={[styles.jiu_box, styles.zceng_box]}>
                                    <View style={{ width: 70 }}>
                                        <Text style={styles.xin_box_color}>短信通知</Text>
                                    </View>
                                    <TextInput
                                        style={{ fontSize: 12, textAlign: 'right', textAlignVertical: 'center', flex: 1, color: '#B2BBC2', height: 47, }}
                                        placeholder="18627566503"
                                        placeholderTextColor="#B2BBC2"
                                        underlineColorAndroid="transparent"
                                        numberOfLines={1}
                                        />
                                </View>
                            </View>
                        </View>
                    </View >
                );
        }
    }


    renderBody() {
        let { showBindAccount, showSeatCategory, showAlternativeDate} = this.state;
        return (
            <View style={styles.container}>
                <View style={styles.waiceng_box}>
                    <TouchableOpacity
                        activeOpacity={0.8}
                        onPress={() => this._onPress('TrainNumber')}
                        style={[styles.jiu_box, styles.zceng_box, styles.xin_border]}>
                        <View style={{ width: 70 }}>
                            <Text style={styles.xin_box_color}>备选车次：</Text>
                        </View>
                        <TextInput
                            style={styles.box_input}
                            placeholder="提高抢票成功率"
                            placeholderTextColor="#B2BBC2"
                            underlineColorAndroid="transparent"
                            numberOfLines={1}
                            editable={false}
                            />
                        <View style={{ width: 30, alignItems: 'flex-end' }}>
                            <Icon name="chevron-thin-right" size={18} color="#BDC4CA" />
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity
                        onPress={this.onOpenSeatCategory.bind(this)}
                        activeOpacity={0.8}
                        style={[styles.jiu_box, styles.zceng_box, styles.xin_border]}>
                        <View style={{ width: 70 }}>
                            <Text style={styles.xin_box_color}>备选坐席：</Text>
                        </View>
                        <TextInput
                            style={styles.box_input}
                            placeholder="提高抢票成功率"
                            placeholderTextColor="#B2BBC2"
                            underlineColorAndroid="transparent"
                            numberOfLines={1}
                            editable={false}
                            />
                        <View style={{ width: 30, alignItems: 'flex-end' }}>
                            <Icon name="chevron-thin-right" size={18} color="#BDC4CA" />
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity
                        onPress={this.onOpenAlternativeDate.bind(this)}
                        activeOpacity={0.8}
                        style={[styles.jiu_box, styles.zceng_box]}>
                        <View style={{ width: 70 }}>
                            <Text style={styles.xin_box_color}>备选日期：</Text>
                        </View>
                        <TextInput
                            style={styles.box_input}
                            placeholder="提高抢票成功率"
                            placeholderTextColor="#B2BBC2"
                            underlineColorAndroid="transparent"
                            numberOfLines={1}
                            editable={false}
                            />
                        <View style={{ width: 30, alignItems: 'flex-end' }}>
                            <Icon name="chevron-thin-right" size={18} color="#BDC4CA" />
                        </View>
                    </TouchableOpacity>
                </View>
                {this.renderState()}
                <BindAccount
                    showBindAccount={showBindAccount}
                    onShowBindAccount={this.onOpenBindAccount.bind(this)}
                    onHideBindAccount={this.onCloseBindAccount.bind(this)}
                    />
                <SeatCategory
                    showSeatCategory={showSeatCategory}
                    onShowSeatCategory={this.onOpenSeatCategory.bind(this)}
                    onHideSeatCategory={this.onCloseSeatCategory.bind(this)}
                    />
                <AlternativeDate
                    showAlternativeDate={showAlternativeDate}
                    onShowAlternativeDate={this.onOpenAlternativeDate.bind(this)}
                    onHideAlternativeDate={this.onCloseAlternativeDate.bind(this)}
                    />
                <View style={styles.prompts}>
                    <View style={styles.prompts_top}>
                        <Text style={styles.prompts_top_ft}>在发车一小时前一直为您抢票，您可以随时停止抢票。</Text>
                    </View>
                    <TouchableOpacity
                        activeOpacity={0.8}
                        onPress={() => this._onPress('GtHalfway')}
                        style={styles.prompts_bottom}>
                        <Text style={styles.prompts_bottom_ft}>开始抢票</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: CommonStyles.colors.background,
    },
    waiceng_box: {
        backgroundColor: '#fff',
    },
    zceng_box: {
        marginLeft: 20,
        marginRight: 20,
        width: Constants.window.width - 40, marginTop: 5,
    },
    xin_border: {
        borderBottomColor: '#C8C7CC',
        borderBottomWidth: 0.5, height: 47, justifyContent: 'center'
    },
    xin_box: {
        flexDirection: 'row', alignItems: 'center',
        justifyContent: 'space-between',
    },
    jiu_box: {
        flexDirection: 'row', alignItems: 'center',
        justifyContent: 'space-between'
    },
    xin_box_color: { color: '#555555', fontSize: 12 },
    Total: {
        flexDirection: 'row', alignItems: 'center'
    },
    box_input: {
        fontSize: 12, textAlign: 'left',
        textAlignVertical: 'center', flex: 1, color: '#B2BBC2', height: 47,
    },
    //第一次登陆，绑定12306账号，添加乘车人，复用样式
    binding: {
        width: Constants.window.width, backgroundColor: 'white', height: 40, justifyContent: 'center',

    },
    binding_box: {
        marginLeft: 20, marginRight: 20, flexDirection: 'row', justifyContent: 'space-between', width: Constants.window.width - 40,
        paddingBottom: 10, paddingTop: 10
    },
    binding_buttom: {
        width: Constants.window.width, marginLeft: 30, marginRight: 30, marginTop: 20
    },
    //添加乘车人
    tianjia: {
        width: Constants.window.width - 40, marginLeft: 20, marginRight: 20, flexDirection: 'row',
    },
    tianjia_lf: {
        height: 40, justifyContent: 'center', width: 30, alignItems: 'flex-start'
    },
    tianjia_lf_img: {
        width: 22, height: 22
    },
    tianjia_ce: {
        height: 40, width: (Constants.window.width - 40 - 30) / 2
    },
    tianjia_ce_li: {
        height: 40, justifyContent: 'center',
    },
    //开始抢票
    prompts: {
        position: 'absolute', bottom: 0, width: Constants.window.width
    },
    prompts_top: {
        backgroundColor: CommonStyles.colors.promptBG, height: 23, justifyContent: 'center', alignItems: 'center'
    },
    prompts_top_ft: {
        fontSize: 10, color: '#555555'
    },
    prompts_bottom: {
        backgroundColor: '#FF8B00', height: 48.5, justifyContent: 'center', alignItems: 'center'
    },
    prompts_bottom_ft: {
        color: 'white', fontSize: 12
    }
});

export default GtStart;